<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- #section:basics/content.breadcrumbs -->
<div class="breadcrumbs" id="breadcrumbs">
	<script type="text/javascript">
		try {
			ace.settings.check('breadcrumbs', 'fixed');
		} catch (e) {
		}
	</script>

	<ul class="breadcrumb">
		<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#"
			id="firstRange"></a></li>
		<li class="active" id="secondRange"></li>
	</ul>
	<!-- /.breadcrumb -->

</div>

<!-- /.page-header -->
<!-- PAGE CONTENT BEGINS -->
<div class="page-content" style="overflow-y:auto;" id="page-content">
	<div class="row">
		<div class="col-sm-10">
			<div id="demoChart" style="height:400px;width: 1000px;"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-10">
			<div id="demoChart3" style="height:400px;width: 1000px;"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-10">
			<div id="demoChart4" style="height:400px;width: 1000px;"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-10">
			<div id="demoChart2" style="height:400px;width: 1000px;"></div>
		</div>
	</div>
	<div class="row">
		<p>目前我们能够做的图形化图表类型有14大类，超过57个图表，基本上涵盖了目前所有主流的图表类型，详细的图表如下：</p>
		<p><b>曲线图：</b>折线图、显示点值的折线图、时间轴折线图、轴反转的曲线图、带标识的曲线图、分辨带曲线图、时间不连续的轴曲线图、对数直线图</p>
		<p><b>区域图：</b>包含负数的区域图、堆栈面积图、百分比堆栈面积图断裂的区域图、轴反转的区域图、曲线区域图、区域范围图、区域范围线图</p>
		<p><b>3D图：</b>3D柱状图、包含空值的3D柱状图、分组堆叠3D图、3D饼图、3D双饼图、可调整视角的3D散点图</p>
		<p><b>柱状图：</b>柱状图、column-drilldown、包含负值的柱状图、通过表格获取值的柱状图、柱状范围图、显示值的柱状图、柱形堆叠图、分组柱形堆叠图、百分比堆栈柱状图、条形图、堆叠条形图、正反堆叠条形图
		<p><b>饼图：</b>饼图、颜色渐变的饼图、双饼图、带图例饼图、半饼图</p>
		<p><b>散列图：</b>散列图、气泡图、3D 气泡图</p>
		<p><b>混合图：</b>【柱状、曲线、饼图混合图】、两个(Y)轴的混合图、多个(Y)轴的混合图、线性回归图</p>
		<p><b>仪表图：</b>速度计、时钟、双刻度、伏-压图</p>
		<p><b>极地图：</b>极地图、极地蛛网图、极性风向图</p>
		<p><b>箱线图</b></p>
		<p><b>错误条形图</b></p>
		<p><b>瀑布图</b></p>
		<p><b>漏斗图</b></p>
		<p><b>渲染图</b></p>
	</div>
</div>
<script src="../js/plugin/Highcharts-4.0.3/highcharts.js"></script>
<script src="../js/plugin/Highcharts-4.0.3/themes/dark-green.js"></script>
<script type="text/javascript" src="../js/plugin/Highcharts-4.0.3/highcharts-more.js"></script>
<script type="text/javascript" src="../js/kpi/demo.js"></script>
<!-- PAGE CONTENT ENDS -->